import JVxeCellMixins from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'

// tags 组件的显示组件
export const TagsSpanCell = {
    name: 'JVxeTagsCell',
    mixins: [JVxeCellMixins],
    data() {
        return {
            innerTags: [],
        }
    },
    watch: {
        innerValue: {
            immediate: true,
            handler(value) {
                if (value !== this.innerTags.join(';')) {
                    let rv = replaceValue(value)
                    this.innerTags = rv.split(';')
                    this.handleChangeCommon(rv)
                }
            },
        },
    },
    methods: {
        renderTags(h) {
            let tags = []
            for (let tag of this.innerTags) {
                if (tag) {
                    let tagProps = {}
                    let tagStyle = {}
                    let setTagColor = this.originColumn.setTagColor
                    if (typeof setTagColor === 'function') {
                        /**
                         * 设置 tag 颜色
                         *
                         * @param event 包含的字段：
                         * event.tagValue 当前tag的值
                         * event.value 当前原始值
                         * event.row 当前行的所有值
                         * event.column 当前列的配置
                         * event.column.own 当前列的原始配置
                         * @return Array | String 可以返回一个数组，数据第一项是tag背景颜色，第二项是字体颜色。也可以返回一个字符串，即tag背景颜色
                         */
                        let color = setTagColor({
                            tagValue: tag,
                            value: this.innerValue,
                            row: this.row,
                            column: this.column,
                        })
                        if (Array.isArray(color)) {
                            tagProps.color = color[0]
                            tagStyle.color = color[1]
                        } else if (color && typeof color === 'string') {
                            tagProps.color = color
                        }
                    }
                    tags.push(h('a-tag', {
                        props: tagProps,
                        style: tagStyle,
                    }, [tag]))
                }
            }
            return tags
        },
    },
    render(h) {
        return h('div', {}, [
            this.renderTags(h)
        ])
    },
}

// tags 组件的输入框
export const TagsInputCell = {
    name: 'JVxeTagsInputCell',
    mixins: [JVxeCellMixins],
    data() {
        return {
            innerTagValue: '',
        }
    },
    watch: {
        innerValue: {
            immediate: true,
            handler(value) {
                if (value !== this.innerTagValue) {
                    this.handleInputChange(value)
                }
            },
        },
    },
    methods: {

        handleInputChange(value, event) {
            this.innerTagValue = replaceValue(value, event)
            this.handleChangeCommon(this.innerTagValue)
            return this.innerTagValue
        },

    },
    render(h) {
        return h('a-input', {
            props: {
                value: this.innerValue,
                ...this.cellProps
            },
            on: {
                change: (event) => {
                    let {target, target: {value}} = event
                    let newValue = this.handleInputChange(value, event)
                    if (newValue !== value) {
                        target.value = newValue
                    }
                }
            },
        })
    },
}

// 将值每隔两位加上一个分号
function replaceValue(value, event) {
    if (value) {
        // 首先去掉现有的分号
        value = value.replace(/;/g, '')
        // 然后再遍历添加分号
        let rv = ''
        let splitArr = value.split('')
        let count = 0
        splitArr.forEach((val, index) => {
            rv += val
            let position = index + 1
            if (position % 2 === 0 && position < splitArr.length) {
                count++
                rv += ';'
            }
        })
        if (event && count > 0) {
            let {target, target: {selectionStart}} = event
            target.selectionStart = selectionStart + count
            target.selectionEnd = selectionStart + count
        }
        return rv
    }
    return ''
}
